<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        缓冲区:
        <button onclick="point()">点</button>
        <button onclick="polyline()">线</button>
        <button onclick="polygon()">面</button>
    </div>
    <div id=cesiumContainer></div>
    <!-- 引入turf插件 -->
    <script src="../libs/turf.min.js"></script>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>
    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            camera: {
                position: {
                    x: 119.3006147,
                    y: 26.0316619,
                    z: 4809,
                },
                angle: {
                    heading: 7.33,
                    pitch: -72.53,
                    roll: 0,
                },
                duration: 3,
                complete: () => {
                    console.log("飞行结束了");
                }
            },
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ]
        });
        var gl = new cpc.GraphicLayer();
        map.add(gl);
        function point() {
            const point = [119.3006147, 26.0316619, 200];
            gl.addByOption({
                position: {
                    x: point[0],
                    y: point[1],
                    z: point[2]
                },
                point: {
                    pixelSize: 10,
                    color: Cesium.Color.YELLOW,
                },
            })
            const buffer = cpc.Buffer.instance.point(point, 300, "meters", 64);
            gl.addByOption({
                polygon: {
                    hierarchy: buffer,
                    height: point[2],
                    material: Cesium.Color.GREEN,
                },
            })
        }
        function polyline() {
            const polyline = [[119.3006147, 26.0316619, 1], [118, 25, 1]];
            gl.addByOption({
                polyline: {
                    positions: polyline,
                    width: 1,
                    material: Cesium.Color.YELLOW
                },
            })
            const buffer = cpc.Buffer.instance.polyline(polyline, 30, "meters", 64);
            console.log(buffer);
            gl.addByOption({
                polygon: {
                    hierarchy: buffer,
                    height: 0,
                    material: cpc.Cesium.Color.GREEN,
                },
            })
        }
        function polygon() {
            const polygon = [[119.2058, 26.3469], [119.1715, 26.3443], [119.1735, 26.3271], [119.2085, 26.3257]];
            gl.addByOption({
                polygon: {
                    hierarchy: polygon,
                    height: 1,
                    material: Cesium.Color.YELLOW,
                },
            })
            const buffer = cpc.Buffer.instance.polygon(polygon, 30, "meters", 64);
            console.log(buffer);
            gl.addByOption({
                polygon: {
                    hierarchy: buffer,
                    height: 0,
                    material: Cesium.Color.GREEN,
                },
            })
        }
    </script>
</body>

</html>